const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

  module.exports = {
      mode:"development",
    entry: "./src/index.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "index.js" // 出口文件名
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html' 
        }),
        new MiniCssExtractPlugin()
        
    ],
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ],
      },
    
  }